import VxeColumn from './VxeColumn';
import toolButtons from './ToolButtons';
import tableAction from './TableAction';
import {
  VxeGridInstance,
  BasicTableProps,
  VxeGridListeners
} from '@/components/VxeTable';
import { ref, reactive } from 'vue';
import tableFilter from '@/components/TableFilter/index.vue';
export const TableRef = ref<VxeGridInstance>();
export const FilterRef = ref<InstanceType<typeof tableFilter>>();
export default {
  FilterRef: ref<InstanceType<typeof tableFilter>>()
};
const gridEvents: VxeGridListeners = {
  headerCellClick(params) {
    const { column } = params;
    console.log(`表头单元格点击${column.title}`);
  },
  headerCellDblclick(params) {
    const { column } = params;
    console.log(`表头单元格双击${column.title}`);
  },
  headerCellMenu(params) {
    const { column } = params;
    console.log(`表头右键单元格 ${column.title}`);
  },
  cellClick(params) {
    const { column, row } = params;
    console.log(column, row);

    console.log(`单元格点击${column.title}`);
  },
  cellDblclick(params) {
    const { column } = params;
    console.log(`单元格双击${column.title}`);
  },
  cellMenu(params) {
    const { row } = params;
    console.log(`单元格右键行 ${row.name}`);
  },
  footerCellClick(params) {
    const { column } = params;
    console.log(`表尾单元格点击${column.title}`);
  },
  footerCellDblclick(params) {
    const { column } = params;
    console.log(`表尾单元格双击${column.title}`);
  },
  footerCellMenu(params) {
    const { column } = params;
    console.log(`表尾右键单元格 ${column.title}`);
  },
  checkboxChange(params) {
    console.log(`复选框切换 ${params.checked}`);
  },
  checkboxAll(params) {
    console.log(`复选框全选切换 ${params.checked}`);
  },
  scroll(params) {
    console.log(
      `滚动事件scrollTop=${params.scrollTop} scrollLeft=${params.scrollLeft}`
    );
  },
  zoom(params) {
    console.log(`表格全屏 type=${params.type}`);
  },
  custom(params) {
    console.log(`表格自定义列表 type=${params.type}`);
  }
};

export const useConfig = (
  queryCall: (param) => Promise<any>,
  bindOpitons?: BasicTableProps | undefined
) => {
  const FilterRef = ref<InstanceType<typeof tableFilter>>();
  const TableRef = ref<VxeGridInstance>();
  return {
    TableRef,
    FilterRef,
    Columns: VxeColumn,
    ToolBtn: toolButtons,
    Action: tableAction,
    TableFilter: tableFilter,
    gridEvents,
    options: reactive<BasicTableProps>({
      ...bindOpitons,
      border: true,
      height: 'auto',
      columnConfig: {
        resizable: true
      },
      toolbarConfig: {
        enabled: true,
        export: false,
        zoom: false,
        print: false,
        refresh: true,
        custom: false
      },
      columns: VxeColumn,
      proxyConfig: {
        ajax: {
          query: async ({ page, form }) => {
            if (
              FilterRef.value &&
              FilterRef.value.conModelsJson &&
              FilterRef.value.conModelsJson.length
            ) {
              form.ConModels = FilterRef.value?.conModelsJson;
            }
            const data = await queryCall({ ...page, ...form });
            TableRef.value?.setRadioRow(data.items[0]);
            return data;
          }
        }
      }
    })
  };
};
